<!--
 * @Description: 
 * @Author: 赵大壮
 * @Date: 2021-12-07 10:36:22
 * @LastEditTime: 2021-12-08 10:28:19
 * @LastEditors: 赵大壮
-->
<template>
  <div class="header">
    <!-- 折叠按钮 -->
    <div class="collapse-btn" @click.prevent="changeSidebar()">
      <i v-if="!collapse" class="el-icon-s-fold"></i>
      <i v-else class="el-icon-s-unfold"></i>
    </div>
    <div class="logo">心理咨询服务平台</div>
    <div class="header-right">
      <div class="header-user-con">
        <!-- 用户头像 -->
        <div class="user-avator">
          <el-avatar
            icon="el-icon-user-solid"
            @click="changeSidebar"
          ></el-avatar>
        </div>
        <!-- 用户名下拉菜单 -->
        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ username }}
            <i class="el-icon-caret-bottom"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="editPwd">修改密码</el-dropdown-item>
              <el-dropdown-item divided command="loginout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped></style>
